/*!
 * =====================================================
 *  fitstart WeChat promotion page style
 * =====================================================
 */

/* ! Style Check List
 * =====================================================
 * Normal
 * =========================
 * Home page
 * =========================
 *
 * =====================================================
 */

@font-face { 
  font-family: 'happyzcool';
  src:url('fonts/happyzcool.ttf')  format('truetype'); 
}

@font-face { 
  font-family: 'DFPShaoNvW5';
  src:url('fonts/DFPShaoNvW5.TTF')  format('truetype'); 
}

.page {
	background-color: #ffde00;
}

.no-margin {
	margin: 0;
}

.no-border {
	border: none !important;
}

.hide {
	display: none !important;
}

/**
 * ===============
 * home page
 * ===============
 * mylan93@163.com
 * ===============
 **/
.home-page .logo {
 	margin-top: 1rem;
  margin-left: 1.25rem;
  height: 2.5rem;
}

.home-page .home-cover,
.home-page .button-group img,
.introduction .activity-wrap img  {
	display: block;
  width: 100%;
}

.home-page .button-group {
	padding: 0 1rem;
}

.high-server img {
	width: 100%;
	display: block;
	margin-bottom: .75rem;
}

.questionnaire .header,
.questionnaire-survey .header,
.information .header {
	padding: 1rem .75rem 1.75rem;
	background: url(../images/bmi-test/questionnaire-top.png) no-repeat;
	background-size: 100% 100%;
}

.questionnaire,
.questionnaire-survey,
.information {
	bottom: 4.5rem !important;
}

.question-wrap .bar-footer {
	height: 4.5rem;
}

.question-wrap .bar-footer,
.question-wrap .bar-footer:before {
	background-color: transparent;
}

.question-wrap .footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 1rem;
	height: 4.5rem;
	background: url(../images/bmi-test/questionnaire-bottom.png) no-repeat;
	background-size: cover;
}

.questionnaire .headline,
.questionnaire-survey .headline,
.information .headline {
	margin: 0;
	width: 100%;
	line-height: 1.2;
	color: #313131;
	font-size: 21pt;
	font-family: 'happyzcool',Helvetica,sans-serif;
}

.questionnaire .survey-title,
.questionnaire-survey .survey-title {
	margin-top: 1rem;
}

.questionnaire .survey-body,
.questionnaire-survey .survey-body,
.information .survey-body {
	padding: 0 .75rem 0;
	min-height: 22rem;
	font-size: 1.25rem;
	color: #ffde00;
	font-family: 'happyzcool',Helvetica,sans-serif;
}

.answer-select {
	margin-top: .25rem;
	font-size: .8rem;
}

.answer-select .item {
	position: relative;
	display: inline-block;
	margin-right: .75rem;
	margin-bottom: .25rem;
}

.answer-select label {
	display: inline-block;
	padding: 0 .5rem;
	background: url(../images/bmi-test/select-bg.png) no-repeat;
	background-size: 100% 100%;
}

.answer-select input[type='radio'] {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	opacity: 0;
}

.answer-select input:checked + label{
	color: #000;
	background: url(../images/bmi-test/select-bg-active.png) no-repeat;
	background-size: 100% 100%;
}
 
.questionnaire-bottom {
	position: absolute;
	bottom: 0;
}

.survey-btn {
	display: block;
	margin: 0 auto;
	width: 7.5rem;
	height: 2rem;
	line-height: 2rem;
	color: #313131;
	font-family: 'happyzcool',Helvetica,sans-serif;
  background: url(../images/bmi-test/btn.png) no-repeat;
  background-size: 100% 100%;
}

.survey-btn:focus,
.survey-btn:active {
	color: #000;
}

.information .survey-body {
	width: 16rem;
	margin: 2rem auto 0;
	min-height: auto;
	padding-top: 0px;
}

.information .input-group {
	margin-bottom: 1rem;
}

.information .input-label,
.information .input-wrap {
	display: inline-block;
}

.information .input-wrap {
	border-bottom: 1px solid #ffde00;
}

.information .input-wrap input[type=number] {
	width: 8rem;
	padding-right: .75rem;
	text-align: right;
	background: transparent;
  border: none;
}

.information .answer-select {
	margin: 0;
	font-size: 1.25rem;
}

.information .answer-select .item {
	margin-right: 0;
	margin-bottom: 0;
}

.information .answer-select label {
	margin: 0;
	padding: 0;
	width: 90px;
	text-align: center;
}

.result .result-header,
.result .result-analyze {
	display: block;
	width: 100%;
}

.result .fs-score {
	position: absolute;
	top: 11%;
	left: 50%;
	margin-left: -1.72rem;
	width: 3.45rem;
	height: 2.7rem;
	line-height: 2.7rem;
	border-radius: .5rem;
	border: 2px dashed #874a26;
	font-size: 1.2rem;
  font-family: 'happyzcool',Helvetica,sans-serif;
  font-weight: bolder;
  color: #000;
}

.result .result-body {
	position: relative;
	display: block;
	width: 8rem;
	margin: 1.5rem auto 0;
}

.result .result-trumpet {
	position: absolute;
	top: -.75rem;
	left: -2.5rem;
	width: 2rem;
}

.result .survey-btn {
	padding: .5rem 0;
	width: 100%;
	height: auto;
	line-height: 1;
	font-size: .9rem;
	background-size: 100% 100%;
}

.introduction {
	background: url(../images/bmi-test/introduction-bg.png) no-repeat;
	background-size: cover;
}

.introduction-title {
	padding: 2rem .5rem .75rem;
	text-align: center;
	font-size: 1.6rem;
	font-family: 'happyzcool',Helvetica,sans-serif;
}

.introduction-title img {
	display: block;
	width: 13rem;
	margin: 0 auto;
}

.introduction .activity-wrap {
	margin-top: 1rem;
}

.introduction .footer {
	margin-top: .75rem;
}

.introduction .survey-btn {
	background-size: 100% 100%;
}
